<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>城市道路渠化信息服务系统</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">

<!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">-->
    <link th:href="@{/FileInput/css/fileinput.css}" media="all" rel="stylesheet" type="text/css" />
<!--    <link rel="stylesheet" th:href="@{https://use.fontawesome.com/releases/v5.5.0/css/all.css}" crossorigin="anonymous">-->
    <link th:href="@{/FileInput/themes/explorer-fas/theme.css}" media="all" rel="stylesheet" type="text/css" />
    <script th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script>
<!--    <script th:src="@{https://code.jquery.com/jquery-3.3.1.min.js}" crossorigin="anonymous"></script>-->
    <script th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js}" crossorigin="anonymous"></script>
    <script th:src="@{/FileInput/js/plugins/piexif.js}" type="text/javascript"></script>
    <script th:src="@{/FileInput/js/plugins/sortable.js}" type="text/javascript"></script>
    <script th:src="@{/FileInput/js/fileinput.js}" type="text/javascript"></script>
    <script th:src="@{/FileInput/js/locales/fr.js}" type="text/javascript"></script>
    <script th:src="@{/FileInput/js/locales/es.js}" type="text/javascript"></script>


    <script th:src="@{/FileInput/themes/fas/theme.js}" type="text/javascript"></script>
    <script th:src="@{/FileInput/themes/explorer-fas/theme.js}" type="text/javascript"></script>

    <style type="text/css">
        /* Chart.js */
        /*导航栏居中*/
        /*解决闪烁*/
        .box{
            visibility: hidden;
        }
        /*文字居中*/
        th,td{
            text-align: center;
        }
        /*添加表格边框*/
        .f1{
            border: 1px solid #dee2e6;
        }
        .f2{
            border: 1px solid #dee2e6;
        }
        .f3{
            border: 1px solid #dee2e6;
        }

        /*导航栏居中*/
        .my-form {
            flex-flow: inherit;
        }
        .table td {
            vertical-align: inherit;
        }

        /*.liActive {*/
        /*    background-color: red !important;*/
        /*}*/


        /*分页放中间*/
        .pagination {
            padding-left: 50%;
            margin-left: -200px;
            width: 200px;
        }

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }

        /*a{*/

        /*	transition: all 0.5s;*/
        /*}*/
        /*a:hover {*/
        /*	color: #fff;*/
        /*	text-decoration: none;*/
        /*	border-radius: 5px;*/
        /*	background-color: #03e9f4;*/
        /*	box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;*/
        /*}*/
    </style>
</head>

<body>

<!--提示框-->
<div onclick="this.remove()" style="width: 300px;position: absolute;left: 500px;top: 60px;z-index: 99;
            background-color: rgba(0, 0, 0, 0.3);color: red;
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);" th:if="${not #strings.isEmpty(msg)}" class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong th:text="${msg}"></strong>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="box">
    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
        <div style="display: flex;width: 300px">

            <a class="navbar-brand col-sm-3 col-md-2 mr-0" th:href="@{/uav/user/index}" style="padding-right: 241px;">
                城市道路渠化信息服务系统
            </a>
            <!--			<input class="col-sm-3 mr-0 form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">-->
            <!--			<button type="button" class="btn btn-dark">查询</button>-->
            <!--			<form class="form-control" action="/hello">-->
            <!--			<input class="form-control form-control-dark w-25" type="text" placeholder="Search">-->
            <!--			<button type="submit" class="btn btn-dark">查询</button>-->
            <form class="form-inline my-form" th:action="@{/uav/user/system}">
                <input name="roadCrossing" class="form-control form-control-dark  " type="search" placeholder="Search"
                       aria-label="Search" style="width: 500px !important">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit" style="margin-left: 10px">Search</button>
            </form>
            <!--			</form>-->
        </div>

        <ul class="navbar-nav px-3">
            <li class="nav-item text-nowrap">
                <a class="nav-link" th:href="@{/uav/logout}">Sign out</a>
            </li>
        </ul>
    </nav>

    <!--		退出标签-->
    <div class="container-fluid">
        <div class="row">
            <nav class="col-md-2 d-none d-md-block bg-light sidebar">
                <div class="sidebar-sticky">
                    <ul class="nav flex-column">

                        <li class="nav-item" style="margin-top: 5px;margin-left: 20px">
                            <a class="nav-link" th:href="@{/uav/user/index?id=0}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                     stroke-linejoin="round" class="feather feather-home">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                                </svg>
                                路段信息 <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item" style="margin-top: 10px;margin-left: 20px">
                            <a class="nav-link" th:href="@{/uav/user/manger?id=1}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
                                    <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>
                                </svg>
                                &nbsp;用户管理
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item" style="margin-top: 10px;margin-left: 20px">
                            <a class="nav-link" th:href="@{/uav/user/system?id=2}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-signpost-2" viewBox="0 0 16 16">
                                    <path d="M7 1.414V2H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h5v1H2.5a1 1 0 0 0-.8.4L.725 8.7a.5.5 0 0 0 0 .6l.975 1.3a1 1 0 0 0 .8.4H7v5h2v-5h5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H9V6h4.5a1 1 0 0 0 .8-.4l.975-1.3a.5.5 0 0 0 0-.6L14.3 2.4a1 1 0 0 0-.8-.4H9v-.586a1 1 0 0 0-2 0zM13.5 3l.75 1-.75 1H2V3h11.5zm.5 5v2H2.5l-.75-1 .75-1H14z"/>
                                </svg>
                                &nbsp;道路管理
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>


                    </ul>
                </div>
            </nav>

            <!--				Share  Export  This week-->
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                <h2>
                    上传excel文件
                </h2>
                <div class="container my-4">
                    <form enctype="multipart/form-data" action="/uav/user/readExcel" method="POST">

                        <div class="file-loading">
                            <input name="file" id="file-0a" class="file" multiple type="file" data-theme="fas">
                        </div>
                        <br>
                        <!-- <button type="submit" class="btn btn-primary">Submit</button> -->
<!--                        <button type="reset" class="btn btn-outline-secondary">Reset</button>-->
                    </form>
                </div>

                <h2>
                    道路信息
                </h2>
                <p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                           style="background-color: transparent;color: black">添加路宽</button></p>
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                        <tr>
                            <th>交叉路口名称</th>
                            <th>道路名称</th>
                            <th>顺序</th>
                            <th>路宽</th>
                            <th>车道类型</th>
                            <th>行驶方向</th>
                            <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="order" th:each="road:${roads}">
                            <td class="f1">[[${road.roadcrossing}]]</td>
                            <td class="f2">[[${road.roadname}]]</td>
                            <td class="f3">[[${road.order}]]</td>
                            <td class="double">[[${road.roadwidth}]]</td>
                            <td>[[${road.roadtype}]]</td>
                            <td>[[${road.roaddirection}]]</td>
                            <td>
                                <a class="btn btn-outline-success"
                                   th:href="@{/uav/user/detail(roadCrossing=${road.roadcrossing},id=${road.id})}">查看</a>
                                <button type="button" class="btn btn-outline-success"
                                        data-toggle="modal" data-target="#myModal2"
                                        th:onclick="updateRoad([[${road}]])">修改</button>

                                <button type="button" class="btn btn-outline-success"
                                        data-toggle="modal" data-target="#myModal1"
                                        th:onclick="updateRoad1([[${road}]])">删除</button>


                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
                <!--添加拟态框-->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content" style="width: 533px;">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel">
                                    添加坐标
                                </h4>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                            </div>
                            <div class="modal-body">
                                <form action="/uav/user/system/insertRoad">
                                    <input type="hidden" value="1" id="i3" name="id">
                                    <div class="form-group">
                                        <label for="u" style="color: black!important;">交叉路口名称</label>
                                        <input name="roadcrossing" class="form-control" required="">
                                    </div>
                                    <div class="form-group">
                                        <label for="p" style="color: black!important;">道路名称</label>
                                        <input name="roadname" class="form-control"required="">
                                        <label for="x" style="color: black!important;">顺序</label>
                                        <input name="order" class="form-control" required="">
                                        <label for="y" style="color: black!important;">路宽</label>
                                        <input name="roadwidth" class="form-control" required="">

                                        <label for="j" style="color: black!important;">车道类型</label>
                                        <input name="roadtype" class="form-control" required="">

                                        <label for="w" style="color: black!important;">行驶方向</label>
                                        <input name="roaddirection" class="form-control" required="">
                                    </div>


                                    <p><button type="submit" class="btn btn-primary Mybutton" data-toggle="modal" style="margin-left: 400px">确认添加</button></p>

                                </form>
                            </div>
                            <!--            <div class="modal-footer">-->
                            <!--            </div>-->
                        </div>
                    </div>
                </div>
                <!--修改拟态框-->
                <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content" style="width: 533px;">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel2">
                                    修改坐标
                                </h4>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                            </div>
                            <div class="modal-body">
                                <form action="/uav/user/system/updateRoad">
                                    <input type="hidden" value="1" id="i" name="id">

                                    <div class="form-group">
                                        <label for="u" style="color: black!important;">交叉路口名称</label>
                                        <input value="jqx" id="u" name="roadcrossing" class="form-control" required="">
                                    </div>
                                    <div class="form-group">
                                        <label for="p" style="color: black!important;">道路名称</label>
                                        <input value="123456" id="p" name="roadname" class="form-control"required="">
                                        <label for="x" style="color: black!important;">顺序</label>
                                        <input value="user" id="x" name="order" class="form-control" required="">
                                        <label for="y" style="color: black!important;">路宽</label>
                                        <input value="user" id="y" name="roadwidth" class="form-control" required="">

                                        <label for="j" style="color: black!important;">车道类型</label>
                                        <input value="user" id="j" name="roadtype" class="form-control" required="">

                                        <label for="w" style="color: black!important;">行驶方向</label>
                                        <input value="user" id="w" name="roaddirection" class="form-control" required="">
                                    </div>


                                    <p><button type="submit" class="btn btn-primary Mybutton" data-toggle="modal" style="margin-left: 400px">确认修改</button></p>

                                </form>
                            </div>
                            <!--            <div class="modal-footer">-->
                            <!--            </div>-->
                        </div>
                    </div>
                </div>

                <!--删除拟态框-->
                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content" style="width: 533px;">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel1">
                                    删除坐标
                                </h4>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                            </div>
                            <div class="modal-body">
                                <form action="/uav/user/system/deleteRoad">
                                    <input type="hidden" value="1" id="i1" name="id">

                                    <div class="form-group">
                                        <label for="u" style="color: black!important;">交叉路口名称</label>
                                        <input disabled="disabled" value="jqx" id="u1" name="roadcrossing" class="form-control" required="">
                                    </div>
                                    <div class="form-group">
                                        <label for="p" style="color: black!important;">道路名称</label>
                                        <input disabled="disabled" value="123456" id="p1" name="roadname" class="form-control"required="">
                                        <label for="x" style="color: black!important;">顺序</label>
                                        <input disabled="disabled" value="user" id="x1" name="order" class="form-control" required="">
                                        <label for="y" style="color: black!important;">路宽</label>
                                        <input disabled="disabled" value="user" id="y1" name="roadwidth" class="form-control" required="">

                                        <label for="j" style="color: black!important;">车道类型</label>
                                        <input disabled="disabled" value="user" id="j1" name="roadtype" class="form-control" required="">

                                        <label for="w" style="color: black!important;">行驶方向</label>
                                        <input disabled="disabled" value="user" id="w1" name="roaddirection" class="form-control" required="">
                                    </div>


                                    <p><button type="submit" class="btn btn-primary Mybutton" data-toggle="modal" style="margin-left: 400px">确认删除</button></p>

                                </form>
                            </div>
                            <!--            <div class="modal-footer">-->
                            <!--            </div>-->
                        </div>
                    </div>
                </div>

                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <div class="dropdown" style="margin-right: 30px;margin-top: 2px;z-index: 99">
                            <!--                        <h2>道路信息</h2>-->
<!--                            下拉按钮-->
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2">
                                    </rect>
                                    <line x1="16" y1="2" x2="16" y2="6">
                                    </line>
                                    <line x1="8" y1="2" x2="8" y2="6">
                                    </line>
                                    <line x1="3" y1="10" x2="21" y2="10">
                                    </line>
                                </svg>
                            </button>
                            <!--                        </h2>-->
<!--                            下拉菜单项, 分页数显示-->
                            <ul class="dropdown-menu" style="width: 50px !important;min-width: 0rem !important" >
                                <!--                            <li>eee</li>-->
                                <li><a th:href="@{/uav/user/system(limitPage=9,roadCrossing=${roadCrossing})}" style="height: 30px;line-height:30px; text-align: center;display: block;text-decoration: none">10</a></li>
                                <li><a th:href="@{/uav/user/system(limitPage=20,roadCrossing=${roadCrossing})}" style="height: 30px;line-height:30px; text-align: center;display: block;text-decoration: none">20</a></li>
                                <li><a th:href="@{/uav/user/system(limitPage=30,roadCrossing=${roadCrossing})}" style="height: 30px;line-height:30px; text-align: center;display: block;text-decoration: none">30</a></li>
                                <li><a th:href="@{/uav/user/system(limitPage=40,roadCrossing=${roadCrossing})}" style="height: 30px;line-height:30px; text-align: center;display: block;text-decoration: none">40</a></li>
                            </ul>
                        </div>
<!--                        上一页,123页,下一页-->
                        <li class="page-item" onclick="handlePage(0)">
                            <a class="page-link" th:href="@{/uav/user/system(nowPage=${nowPage}-1,roadCrossing=${roadCrossing},limitPage=${limitPage})}"
                               aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item" onclick="handlePage(1)">
                            <a class="page-link" th:href="@{/uav/user/system(nowPage=${nowPage},roadCrossing=${roadCrossing},limitPage=${limitPage})}">1</a>
                        </li>
                        <li class="page-item" onclick="handlePage(2)">
                            <a class="page-link" th:href="@{/uav/user/system(nowPage=${nowPage}+1,roadCrossing=${roadCrossing},limitPage=${limitPage})}">2</a>
                        </li>
                        <li class="page-item" onclick="handlePage(3)">
                            <a class="page-link" th:href="@{/uav/user/system(nowPage=${nowPage}+2,roadCrossing=${roadCrossing},limitPage=${limitPage})}">3</a>
                        </li>
                        <li class="page-item" onclick="handlePage(4)">
                            <a class="page-link" th:href="@{/uav/user/system(nowPage=${nowPage}+1,roadCrossing=${roadCrossing},limitPage=${limitPage})}"
                               aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </main>
            <!--		<a href="#"  onclick="handlePage(123)" >hhhhh </a>-->
        </div>
    </div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>-->
<!--<script type="text/javascript" src="asserts/js/popper.min.js"></script>-->
<!--<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>-->

<!--&lt;!&ndash; Icons &ndash;&gt;-->
<!--<script type="text/javascript" src="asserts/js/feather.min.js"></script>-->
<!--<script>-->
<!--    feather.replace();-->
<!--</script>-->
<script type="text/javascript" charset="UTF-8" defer="defer">
    // location.reload()
    // function handlePage(item) {
    //     var length = document.getElementsByClassName("page-item").length;
    //     // alert(length)
    //     for (var i = 0; i < length; i++) {
    //        document.getElementsByClassName("page-item")[i].style.backgroundColor="page-item";
    //     }
    //     document.getElementsByClassName("page-item")[item].className="page-item active";
    //     // document.getElementsByClassName("page-link")[item].style.backgroundColor="yellow";
    //     // alert( document.getElementsByClassName("page-link")[item].style.backgroundColor);
    // }

    //     var item=[[${light}]]
    // document.getElementsByClassName("page-item")[item].className="page-item active";

    //(1).更新页数
    var page=[[${nowPage}+1]];
    var roadCrossing=String('[[${roadCrossing}]]');
    // if(roadCrossing=="")roadCrossing=null;
    var limitPage=[[${limitPage+0}]]
    console.log(roadCrossing)
    console.log(limitPage)
    if(page%3==1){
        document.getElementsByClassName("page-link")[1].textContent=page;
        document.getElementsByClassName("page-link")[1].href="/uav/user/system?nowPage="+(page-1)+"&roadCrossing="+roadCrossing+"&limitPage="+limitPage;
        document.getElementsByClassName("page-link")[2].textContent=page+1;
        document.getElementsByClassName("page-link")[2].href="/uav/user/system?nowPage="+(page)+"&roadCrossing="+roadCrossing+"&limitPage="+limitPage;
        document.getElementsByClassName("page-link")[3].textContent=page+2;
        document.getElementsByClassName("page-link")[3].href="/uav/user/system?nowPage="+(page+1)+"&roadCrossing="+roadCrossing+"&limitPage="+limitPage;
    }
    else if(page%3==2){
        document.getElementsByClassName("page-link")[1].textContent=page-1;
        document.getElementsByClassName("page-link")[1].href="/uav/user/system?nowPage="+(page-2)+"&roadCrossing="+roadCrossing+"&limitPage="+limitPage;
        document.getElementsByClassName("page-link")[2].textContent=page;
        document.getElementsByClassName("page-link")[2].href="/uav/user/system?nowPage="+(page-1)+"&roadCrossing="+roadCrossing+"&limitPage="+limitPage;
        document.getElementsByClassName("page-link")[3].textContent=page+1;
        document.getElementsByClassName("page-link")[3].href="/uav/user/system?nowPage="+(page)+"&roadCrossing="+roadCrossing+"&limitPage="+limitPage;

    }
    else{
        document.getElementsByClassName("page-link")[1].textContent=page-2;
        document.getElementsByClassName("page-link")[1].href="/uav/user/system?nowPage="+(page-3)+"&roadCrossing="+roadCrossing+"&limitPageInt="+limitPage;
        document.getElementsByClassName("page-link")[2].textContent=page-1;
        document.getElementsByClassName("page-link")[2].href="/uav/user/system?nowPage="+(page-2)+"&roadCrossing="+roadCrossing+"&limitPageInt="+limitPage;
        document.getElementsByClassName("page-link")[3].textContent=page;
        document.getElementsByClassName("page-link")[3].href="/uav/user/system?nowPage="+(page-1)+"&roadCrossing="+roadCrossing+"&limitPageInt="+limitPage;
    }
    // (2).染色函数
    var item=[[${nowPage}+1]]
    // alert(item);
    var length = document.getElementsByClassName("page-item").length;
    // alert(length)
    for (var i = 0; i < length; i++) {
        // alert(document.getElementsByClassName("page-link")[i].textContent);
        if(document.getElementsByClassName("page-link")[i].textContent==item){
            document.getElementsByClassName("page-item")[i].className="page-item active";
            break;
        }
        // document.getElementsByClassName("page-item")[i].style.backgroundColor="page-item";
    }

    // document.getElementsByClassName("page-item")[i].style.backgroundColor="page-item";

    // setTimeout(function(){
    //修改用户
    function updateRoad(location){
        console.log(location)
        document.getElementById('i').value=location.id;
        document.getElementById('u').value=location.roadcrossing;
        document.getElementById('p').value=location.roadname;
        document.getElementById('x').value=location.order;
        document.getElementById('y').value=location.roadwidth;
        document.getElementById('j').value=location.roadtype;
        document.getElementById('w').value=location.roaddirection;
        // alert(u+p+r);
    }
    //删除用户
    function updateRoad1(location){
        document.getElementById('i1').value=location.id;
        document.getElementById('u1').value=location.roadcrossing;
        document.getElementById('p1').value=location.roadname;
        document.getElementById('x1').value=location.order;
        document.getElementById('y1').value=location.roadwidth;
        document.getElementById('j1').value=location.roadtype;
        document.getElementById('w1').value=location.roaddirection;
        // alert(u+p+r);
    }



    //点亮左侧导航栏
    var n=document.getElementsByClassName("nav-link");
    var index=[[${id}+1]];
    console.log(index)
    document.getElementsByClassName("nav-link")[index].className="nav-link active";
    console.log(document.getElementsByClassName("nav-link")[index].className);

    //(4).解决闪烁
    var box=document.getElementsByClassName("box")[0];
    console.log(box.style.visibility);
    box.style.visibility="visible";


    var roadWidthList=document.getElementsByClassName("double");
    for (let i = 0; i < roadWidthList.length; i++) {
        // roadWidthList[i].innerHTML=roadWidthList[i].innerHTML.toFixed(3);
        var num = new Number(roadWidthList[i].innerHTML=roadWidthList[i].innerHTML);
        console.log(num.toFixed(3));
        roadWidthList[i].innerHTML=num.toFixed(3);
    }

</script>
<!--<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script>-->
<script type="text/javascript" th:src="@{/js/popper.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}" ></script>


</body>

</html>
